<template>
  <Back title="我的订单" />
  <div class="order">
    <van-tabs v-model:active="activeName" @click-tab="getList">
      <van-tab title="全部" name="">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });">
              <template #value>
                <span v-if="i.status=='待支付'"  style="color: red;">{{i.status}}</span>
                <span v-else >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;"  >请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
      </van-tab>
      <van-tab title="待支付" name="待支付">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span style="color: red;">{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="进行中" name="进行中">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="已完成" name="已完成">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
      <van-tab title="待评价" name="待评价">
        <div  v-if="islogin"><van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
          >
            <van-cell v-for="i in list" :key="i" :title="i.request_service" @click="this.$router.push({ path: '/order', query: { ordernum: i.ordernum } });" >
              <template #value>
                <span >{{i.status}}</span>
              </template>
              <template #label>
                <span >{{i.outlet.name}}</span>
              </template>
            </van-cell>
          
          </van-list>
        </div>
        <div v-else style="justify-content: center;">请先登录<br><van-button type="success"  size="normal" to="/login" style="width: 200px;">登录</van-button></div>
        <div></div></van-tab>
    </van-tabs>
  </div>
 
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { createApp } from 'vue';
import { Icon,Tabbar, TabbarItem, } from 'vant';
import { useRoute} from 'vue-router';
import http from '../http';
import Back from '../utils/Back.vue';

const islogin = ref(localStorage.getItem('userid'));
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const route = useRoute();
const active = ref(2);
const activeName = ref(route.query.activeName !== undefined ? route.query.activeName : '');
const getList = () => {
      http.get('/order/list/',{params:{userid:islogin.value, status:activeName.value}}).then((res) => {
        list.value = res.data.data;
        loading.value = false;
        console.log(list.value,11111);
        if (list.value.length >= 1) {
          finished.value = true;
        }
      })}
onMounted(() => {
      getList();
  });
</script>
<style scoped>
.bql {
  position: absolute;
  left: auto;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 15%;
}
van-tabbar-item {
  display: inline;
  width: 25%;
}
img {
  display: inline;
}
.order {
  margin-top: 46px;
}
</style>